<template>
  <div>
    <div class="selectpayment_box">
      <div class="selectpayment_head">
        <span class="iconfont icon-jiantou-left" @click="goBack"></span>
        <p>收银台</p>
      </div>
      <div class="selectpayment_price">
        <p class="head">实付金额</p>
        <p class="price"><span>￥</span>{{ price }}</p>
        <p class="tiem">
          支付剩余时间<span>{{ minute }}</span
          >:<span>{{ second }}</span>
        </p>
      </div>
      <div class="payment" :style="{ height: top }">
        <div class="box">
          <p class="head">选择支付方式</p>
          <van-radio-group v-model="radio">
            <div class="payment_box">
              <div class="left">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-zhifubao"></use>
                </svg>
                <p>支付宝</p>
              </div>
              <div class="right">
                <van-radio name="支付宝"></van-radio>
              </div>
            </div>
            <div class="payment_box">
              <div class="left">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-zhifu-weixinzhifu"></use>
                </svg>
                <p>微信支付</p>
              </div>
              <div class="right">
                <van-radio name="微信"></van-radio>
              </div>
            </div>
            <div class="payment_box">
              <div class="left">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-huabei"></use>
                </svg>
                <p>花呗</p>
              </div>
              <div class="right">
                <van-radio name="花呗"></van-radio>
              </div>
            </div>
            <div class="payment_box">
              <div class="left">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-huabeifenqi"></use>
                </svg>
                <p>花呗分期</p>
              </div>
              <div class="right">
                <van-radio name="花呗分期"></van-radio>
              </div>
            </div>
          </van-radio-group>
        </div>
        <div class="btn">
          <div class="box" @click="goInfo">
            <p>{{ radio }}支付 ￥{{ price }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      radio: "支付宝",
      top: null, //选择支付高度
      price: null, //支付价格
      minute: "00", //倒计时分
      second: "00", //倒计时秒
      timeId: null, //定时器id
      goodsLists: [], //购物数组
      goodId: null, //当前产品id
      goodsData: null, //当前产品
    };
  },
  created() {
    //获取价格
    this.price = sessionStorage.getItem("cashierPrice");

    // 获取现在时间
    let time = new Date();

    //获取结束时间
    let endTime = sessionStorage.getItem("endTime");
    //判断如果现在时间大于结束时间订单取消
    if (time < endTime) {
      let numTime = endTime - time;
      let minTime = numTime / (1000 * 60); //将时间转换为分
      //  let sTime = minTime % (1000 * 60) //将时间转换为秒
      minTime = minTime.toFixed(2);
      this.setSecond(minTime); //启动倒计时
    } else {
      sessionStorage.removeItem("newTime");
      sessionStorage.removeItem("endTime");
      this.$router.push("/shopping");
    }
    //获取当前购买产品
    let goodsData = sessionStorage.getItem("commodity");
    goodsData = JSON.parse(goodsData);
    this.goodsData = goodsData;
    this.goodsLists.push(goodsData);
    //存储当前产品ID
    this.goodId = goodsData.goods_id;
  },
  methods: {
    setSecond(cd) {
      let and = cd * 60; //总时间
      let id = setInterval(() => {
        and -= 1;
        let min = parseInt(and / 60);
        let s = and % 60;
        s = parseInt(s);
        s = s >= 10 ? s : "0" + s;
        this.minute = "0" + min;
        this.second = s;
        // console.log("总时间=>", and);
        // console.log("分钟=>",min);
        // console.log("秒=>",s);
        if (and <= 0) {
          // 时间为0时删除订单和页面
          sessionStorage.removeItem("newTime");
          sessionStorage.removeItem("endTime");
          this.$router.push("/shopping");
        }
      }, 1000);
      this.timeId = id;
    },
    //支付进入订单详情
    goInfo() {
      //获取商品列表
      let goodsLists = sessionStorage.getItem("goodsLists");
      if (goodsLists) {
        goodsLists = JSON.parse(goodsLists);
        let off = sessionStorage.getItem("off");
        //判断是否有订单
        if (off) {
          console.log(goodsLists);
          let index = goodsLists.findIndex((item) => {
            return item.purchase == 1;
          });
          goodsLists[index].purchase = 0;
          sessionStorage.setItem("goodsLists", JSON.stringify(goodsLists));
        } else {
          this.goodsData.purchase = 0;
          goodsLists.push(this.goodsData);
          sessionStorage.setItem("goodsLists", JSON.stringify(goodsLists));
        }
      } else {
        //获取订单信息
        let commodity = JSON.parse(sessionStorage.getItem("commodity"));
        commodity.purchase = 0;
        let arr = [];
        arr.push(commodity);
        sessionStorage.setItem("goodsLists", JSON.stringify(arr));
      }
      sessionStorage.removeItem("newTime");
      sessionStorage.removeItem("endTime");
      sessionStorage.removeItem("off");
      this.$router.push("/completeorder");
    },
    // 返回订单
    goBack() {
      Dialog.confirm({
        title: "本次操作会取消支付",
      })
        .then(() => {
          //给当前要购买的产品添加状态 0 支付 1 未支付
          // this.goodsLists.push(this.goodsData);

          let goodsLists = sessionStorage.getItem("goodsLists");
          if (goodsLists) {
            goodsLists = JSON.parse(goodsLists);
            goodsLists.push(this.goodsData);
            sessionStorage.setItem("goodsLists", JSON.stringify(goodsLists));
          } else {
            //获取订单信息
            let commodity = JSON.parse(sessionStorage.getItem("commodity"));
            let arr = [];
            arr.push(commodity);
            sessionStorage.setItem("goodsLists", JSON.stringify(arr));
          }
          //添加一个状态
          sessionStorage.setItem("off", "off");
          this.$router.push("/shopping");
        })
        .catch(() => {
          // console.log("取消");
        });
    },
  },

  mounted() {
    //获取高度
    let payment = document.getElementsByClassName("payment");
    // console.log(payment[0].offsetTop,document.documentElement.clientHeight);
    //获取页面视图高度
    let bodyHeight = document.documentElement.clientHeight;
    // 盒子高度
    this.top = bodyHeight - payment[0].offsetTop + "px";
  },
  destroyed() {
    //清除定时器
    clearInterval(this.timeId);
  },
};
</script>

<style lang="less">
.selectpayment_box {
  //svg总体
  .icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    padding-right: 10px;
  }
  //头部
  .selectpayment_head {
    padding: 10px 18px;
    background-color: #fff;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    left: 0;
    span {
      font-weight: bold;
    }
    p {
      display: inline-block;
      padding-left: 39%;
    }
  }
  //付款金额
  .selectpayment_price {
    padding: 25px 0;
    background-color: #fff;
    text-align: center;
    .head {
      font-size: 14px;
    }
    .price {
      padding: 12px 0;
      font-size: 26px;
      font-weight: bold;
      span {
        font-size: 18px;
      }
    }
    .tiem {
      padding-bottom: 5px;
      font-size: 14px;
      span {
        margin: 0 5px;
        padding: 0 3px;
        background-color: #f1f0f5;
        font-size: 12px;
        font-weight: bold;
      }
    }
  }
  //选择付款方式
  .payment {
    background-color: #fff;
    margin-top: 2px;
    .box {
      padding-top: 12px;
      font-size: 14px;
      .head {
        padding: 0 20px 10px;
      }
      .payment_box {
        border-bottom: 2px solid #f9fafe;
        padding: 10px 20px;
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
        }
      }
    }
    //提交按钮
    .btn {
      width: 100%;
      box-sizing: border-box;
      padding: 0 10px 10px;
      position: fixed;
      bottom: 0;
      left: 0;
      .box {
        height: 30px;
        width: 100%;
        background-color: #00cbcc;
        color: #fff;
        text-align: center;
        font-size: 14px;
      }
    }
  }
}
</style>